<template>
  <el-dialog v-model="dialog" title="采购商账户修改" width="400px">
    <div style="max-height: 400px; overflow-y: auto; display: flex; justify-content: center;">
      <el-form ref="elForm" :model="form" :rules="rules" label-width="80px" style="width: 300px;">
        <el-form-item label="登录名" prop="mobile">
          <el-input placeholder="请输入登录名" v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passwordInput">
          <el-input type="password" placeholder="请输入新密码" v-model="form.passwordInput"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input type="password" placeholder="请输入新密码" v-model="form.rePassword"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="confirmUpdate">保存</el-button>
      <el-button @click="dialog = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  
  import {
    ref,
    reactive,
    inject,
    nextTick,
    getCurrentInstance
  } from 'vue'
  
  const $message = inject('$message');
  const $post = inject('$post');
  const {
    ctx
  } = getCurrentInstance();
  
  const dialog = ref(false);
  
  // 表单
  const form = reactive({
    deptId: '',
    userId: '',
    mobile: '',
    passwordInput: '',
    rePassword: '',
    password: '',
    type: 'buyer'
  })
  // 表单规则
  const rules = {
    mobile: [{
      required: true,
      message: '请输入登录名',
      trigger: 'change'
    }],
    passwordInput: [{
      required: true,
      message: '请输入密码',
      trigger: 'change'
    }, {
      min: 6,
      message: '新密码不小于6位',
      trigger: 'change'
    }, {
      max: 16,
      message: '新密码不超过16位',
      trigger: 'change'
    }, {
      validator: (rule, value, callback) => {
        if (/([A-z]+\d+)|(\d+[A-z]+)/.test(value)) {
          callback();
        } else {
          callback(new Error('密码为6-16位英文数字组合'));
        }
      },
      trigger: 'change'
    }],
    rePassword: [{
      required: true,
      message: '请再次输入密码',
      trigger: 'change'
    }, {
      validator: (rule, value, callback) => {
        if (form.passwordInput == value) {
          callback();
        } else {
          callback(new Error('两次输入密码不一致'));
        }
      },
      trigger: 'change'
    }]
  }
  
  // 确认保存
  const confirmUpdate = () => {
    ctx.$refs.elForm.validate(res => {
      if (!res) return;
      $post('/consumer/updateAccount', form).then(res => {
        $message.success('修改成功');
        dialog.value = false;
      })
    })
  }
  
  defineExpose({
    // 展示模态框
    show: guid => {
      dialog.value = true;
      $post('/v2/consumer/byAccountInit', {
        guid
      }).then(res => {
        form.deptId = res.data.deptId;
        form.userId = res.data.userId;
        form.mobile = res.data.userName;
        form.type = 'buyer';
        form.passwordInput = '';
        form.rePassword = '';
        form.password = '';
        nextTick(ctx.$refs.elForm.clearValidate);
      })
    }
  })
  
</script>

<style>
</style>
